<template>
  <div :class="['login-wrapper', ['', 'login-form-right', 'login-form-left'][direction]]" ref="loginPage">
    <a-form class="login-form ele-bg-white">
      <h4>登录租户</h4>
      <a-form-item v-bind="validateInfos.account">
        <a-input allow-clear size="large" disabled v-model:value="form.account" :placeholder="t('login.username')">
          <template #prefix>
            <user-outlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button block size="large" type="primary" :loading="loading" @click="submit">
          {{ loading ? t('login.loading') : t('login.login') }}
        </a-button>
      </a-form-item>
      <div class="ele-text-center" style="padding-bottom: 32px">

      </div>
    </a-form>
    <div class="login-copyright">copyright © 2022 javaguns.com all rights reserved.</div>
    <!-- 多语言切换 -->
    <div style="position: absolute; right: 30px; top: 20px; z-index: 999">
      <i18n-icon placement="bottomLeft" :style="{ fontSize: '18px', color: '#fff' }" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, unref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import { Form, message } from 'ant-design-vue';
import I18nIcon from '@/layout/components/i18n-icon.vue';
import { getToken, setToken } from '@/utils/token-util';
import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
import { LoginApi } from '@/api/login/LoginApi';
import { CAPTCHA_FLAG, SAAS_FLAG, SSO_CLIENT_ID, SSO_FLAG } from '@/config/setting';
import { useSystemStore } from '@/store/modules/system';
import { SsoUtil } from '@/utils/sso-util';

const useForm = Form.useForm;

const { currentRoute } = useRouter();
const { query } = useRoute();
const { t } = useI18n();

console.log(query);
// 获取url传参的相关单点参数

// 主题信息
let themeInfo = ref({
  gunsMgrLoginBackgroundImg: '',
  gunsMgrFooterText: '',
  gunsMgrBeiUrl: '',
  gunsMgrBeiNo: ''
});
// 登录页面引用
const loginPage = ref(null);
// 加载状态
const loading = ref(false);
// 表单数据
const form = reactive({
  account: query.account,
  tenantCode : query.tenantCode
});

// 表单验证规则
let ruleLists = ref({
  account: [
    {
      required: true,
      message: t('login.username'),
      type: 'string',
      trigger: 'blur'
    }
  ]
});
const { clearValidate, validate, validateInfos } = useForm(
  form,
  computed(() => ruleLists.value)
);

// 从store获取主题数据
let systemStore = useSystemStore();

/* 页面加载完成 */
onMounted(async () => {
  let result = await systemStore.loadThemeInfo();
  themeInfo.value = result;
  // 动态设置登录页面的背景
  loginPage.value.style.setProperty('--customBackground', `url(${result.gunsMgrLoginBackgroundImg})`);
});

/* 跳转到首页 */
const goHome = () => {
  const { query } = unref(currentRoute);
  goHomeRoute(query.from);
};

/* 提交 */
const submit = () => {
  validate().then(() => {
    loading.value = true;
    LoginApi.loginForce(form)
      .then(response => {
        message.success('登录成功');
        setToken(response?.data?.token, false);
        cleanPageTabs();
        goHome();
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

if (getToken()) {
  goHome();
}
</script>

<style lang="less" scoped>
body {
  /*自定义背景图片*/
  --customBackground: url('@/assets/bg-login.jpg');
}

/* 背景 */
.login-wrapper {
  padding: 48px 16px 0 16px;
  position: relative;
  box-sizing: border-box;
  background-image: var(--customBackground);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
  }
}

/* 卡片 */
.login-form {
  width: 360px;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 28px;
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  position: relative;
  z-index: 2;

  h4 {
    padding: 22px 0;
    text-align: center;
  }
}

.login-form-right .login-form {
  margin: 0 15% 0 auto;
}

.login-form-left .login-form {
  margin: 0 auto 0 15%;
}

/* 验证码 */
.login-input-group {
  display: flex;
  align-items: center;

  :deep(.ant-input-affix-wrapper) {
    flex: 1;
  }

  .login-captcha {
    width: 102px;
    height: 40px;
    margin-left: 10px;
    padding: 0;

    & > img {
      width: 100%;
      height: 100%;
    }
  }
}

/* 第三方登录图标 */
.login-oauth-icon {
  color: #fff;
  padding: 5px;
  margin: 0 12px;
  font-size: 18px;
  border-radius: 50%;
  cursor: pointer;
}

/* 底部版权 */
.login-copyright {
  color: #eee;
  text-align: center;
  padding: 48px 0 22px 0;
  position: relative;
  z-index: 1;
}

/* 响应式 */
@media screen and (min-height: 640px) {
  .login-wrapper {
    padding-top: 0;
  }

  .login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -230px;
  }

  .login-form-right .login-form,
  .login-form-left .login-form {
    left: auto;
    right: 15%;
    transform: translateX(0);
    margin: -230px auto auto auto;
  }

  .login-form-left .login-form {
    right: auto;
    left: 15%;
  }

  .login-copyright {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .login-form-right .login-form,
  .login-form-left .login-form {
    left: 50%;
    right: auto;
    margin-left: 0;
    margin-right: auto;
    transform: translateX(-50%);
  }
}
</style>
